<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易网页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="font-sans">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md fixed w-full">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="#" class="font-bold text-xl text-primary">极简示例</a>
            <nav class="hidden md:flex space-x-6">
                <a href="#" class="text-gray-700 hover:text-primary">首页</a>
                <a href="#about" class="text-gray-700 hover:text-primary">关于</a>
                <a href="#contact" class="text-gray-700 hover:text-primary">联系</a>
            </nav>
            <button class="md:hidden text-gray-700" id="menuBtn">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <div class="md:hidden hidden bg-white px-4 py-2" id="mobileMenu">
            <a href="#" class="block py-2 text-gray-700 hover:text-primary">首页</a>
            <a href="#about" class="block py-2 text-gray-700 hover:text-primary">关于</a>
            <a href="#contact" class="block py-2 text-gray-700 hover:text-primary">联系</a>
        </div>
    </header>

    <!-- 主内容 -->
    <main class="pt-20">
        <!-- 英雄区域 -->
        <section class="bg-gradient-to-r from-primary to-blue-600 text-white py-16">
            <div class="container mx-auto px-4 text-center">
                <h1 class="text-3xl md:text-4xl font-bold mb-4">极简网页示例</h1>
                <p class="text-lg md:text-xl mb-8">这是一个使用Tailwind CSS构建的响应式网页</p>
                <a href="#contact" class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors">
                    联系我们
                </a>
            </div>
        </section>

        <!-- 关于区域 -->
        <section id="about" class="py-12 bg-gray-50">
            <div class="container mx-auto px-4">
                <h2 class="text-2xl font-bold text-center mb-8">关于我们</h2>
                <div class="grid md:grid-cols-2 gap-8 items-center">
                    <div>
                        <p class="text-gray-700 mb-4">这是一个简单的HTML示例页面，展示了响应式设计和现代UI的基本要素。</p>
                        <p class="text-gray-700">使用Tailwind CSS v3构建，具有导航栏、内容区域和响应式布局。</p>
                    </div>
                    <img src="https://picsum.photos/id/26/600/400" alt="关于我们" class="rounded-lg shadow-lg">
                </div>
            </div>
        </section>

        <!-- 联系区域 -->
        <section id="contact" class="py-12 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-2xl font-bold text-center mb-8">联系我们</h2>
                <form class="max-w-md mx-auto">
                    <div class="mb-4">
                        <label for="name" class="block text-gray-700 mb-2">姓名</label>
                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                    <div class="mb-4">
                        <label for="email" class="block text-gray-700 mb-2">邮箱</label>
                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                    <div class="mb-6">
                        <label for="message" class="block text-gray-700 mb-2">留言</label>
                        <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"></textarea>
                    </div>
                    <button type="submit" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors">
                        发送消息
                    </button>
                </form>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <p>&copy; 2025 极简示例网站. 保留所有权利.</p>
            <div class="flex justify-center space-x-4 mt-4">
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-facebook"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-twitter"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-instagram"></i>
                </a>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 10) {
                navbar.classList.add('py-2', 'shadow-lg');
                navbar.classList.remove('py-3', 'shadow-md');
            } else {
                navbar.classList.add('py-3', 'shadow-md');
                navbar.classList.remove('py-2', 'shadow-lg');
            }
        });

        // 移动端菜单切换
        document.getElementById('menuBtn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    window.scrollTo({
                        top: target.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    // 关闭移动菜单
                    document.getElementById('mobileMenu').classList.add('hidden');
                }
            });
        });
    </script>
</body>
</html>
    